<template>
    <div class="user-address-container">
        <div class="address-header">
            <div>
                <p style="padding: 10px 50px 10px ;text-align: left;font-weight:bold">地址管理</p>
            </div>
        </div>
        <div class="address-content">
            <div class="address-holder-add"  @click="openAddressEditor()">
                <el-card  class="el-icon-plus add-icon">
                </el-card>
            </div>

            <el-dialog title="收货地址" :visible.sync="addressEditorVisible" :width="'700px'">
              <el-form :model="addressEditor">
                <el-form-item label="收件人" :label-width="addressEditorLabelWidth">
                  <el-input v-model="addressEditor.username" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="收件地址" :label-width="addressEditorLabelWidth">
                  <el-input v-model="addressEditor.address" auto-complete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="addressEditorVisible = false">取 消</el-button>
                <el-button type="primary" @click="editAddress">确 定</el-button>
              </div>
            </el-dialog>
            
            <div v-for="(address, index) in addressList" :key="address.id" class="address-holder">
                <el-card>
                    <div slot="header">
                        <span>收件人:{{address.username}}</span>
                        <el-button style="float: right; padding: 3px 10px" type="text" @click="deleteAddress(index, address)">删除</el-button>
                        <el-button style="float: right; padding: 3px 10px" type="text"  @click="openAddressEditor(address)">编辑</el-button>
                    </div>
                    <div class="address" style="height: 55px">收件地址：{{address.address}}</div>
                </el-card>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
  data() {
    return {
      addressEditorVisible: false,
      addressEditor: {
        id: '',
        username: '',
        address: '',
        addrRef: null   // 当前存储的地址信息在addressList中的引用，用于更新本地数据
      },
      addressEditorLabelWidth: '120px',
      addressList: [
        {
          id: 1,
          username: '李爽爽',
          address: '上海交通大学闵行校区软件学院5318'
        },
        {
          id: 2,
          username: '李爽爽',
          address: '上海交通大学软件学院5320'
        },
        {
          id: 3
        },
        {
          id: 4
        }
      ]
    }
  },
  methods: {
    openAddressEditor (address) {
      if (address) {
        // 修改地址
        this.addressEditor.id = address.id
        this.addressEditor.username = address.username
        this.addressEditor.address = address.address
        this.addressEditor.addrRef = address
        this.addressEditorVisible = true
      } else {
        // 新增地址
        this.addressEditor.id = null
        this.addressEditor.username = ''
        this.addressEditor.address = ''
        this.addressEditor.addrRef = null
        this.addressEditorVisible = true
      }
    },
    editAddress () {
      if (!this.addressEditor.addrRef) {
        // 新增地址
        var newAddress = {
          id: 999, // fake id for testing
          username: this.addressEditor.username,
          address: this.addressEditor.address
        }
        // 这里可以向后台发送新增请求

        // 更新本地数据
        this.addressList.push(newAddress)
      } else {
        // 修改地址

        // 这里可以向后台发送修改请求

        // 更新本地数据
        this.addressEditor.addrRef.username = this.addressEditor.username
        this.addressEditor.addrRef.address = this.addressEditor.address
      }
      this.addressEditorVisible = false
    },
    deleteAddress (index, address) {
      // 这里可以向后台发送删除请求

      // 更新本地数据
      this.addressList.splice(index, 1)
    }
  }
}
</script>
  
<style scoped>
.user-address-container {
  margin-top: 50px;
  padding-bottom: 50px;
  width: 1070px;
  height: 100%;
  float: left;
  /* text-align: left; */
  /* border: 1px solid #DCDFE6; */
  background-color: #ffffff;
}
.address-holder-add {
  float: left;
  width: 450px;
  height: 150px;
  padding: 10px;
  margin-left: 50px;
  /* box-sizing:border-box;   */
  /* border: 1px solid #E4E7ED; */
  text-align: left;

  /* box-sizing: border-box;
  border: 1px dashed #d9d9d9;
  border-radius: 6px; */
}
.address-holder-add .el-card {
  width: 450px;
  height: 150px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.address-holder-add .el-card:hover {
  border-color: #409EFF;
}
.add-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 160px;
  text-align: center;
}
.address-holder {
  float: left;
  width: 450px;
  height: 150px;
  padding: 10px;
  margin-left: 50px;
  /* box-sizing:border-box;   */
  /* border: 1px solid #E4E7ED; */
  text-align: left;
}
.address-content {
  float: left;
  margin-left: auto;
  margin-right: auto;
}

.el-input {
  width: 450px;
}
.el-select {
  width: 450px;
}
.el-form {
  text-align: left;
}
</style>
  

